import React from 'react'
import Search from '../../components/Search';
import Nav from '../../components/Nav';
import { Outlet } from 'react-router-dom';
import './index.css'
import { NavLink } from 'react-router-dom';
export default function Mycenter() {
    function check(num) {
        return () => {
            const h5 = document.getElementsByClassName('list-mian')[0].getElementsByTagName('h5')
            for (let i = 0; i < h5.length; i++) {
                h5[i].className = ''
            }
            h5[num].className = 'check'
        }
    }
    return (
        <div>
            <Search />
            <Nav />
            <div className='center'>
                <div className="center-main">
                    <div className='list'>
                        <h3 className="tt">个人中心</h3>
                        <div className="list-mian">
                              <h4><span>交易管理</span><i className='fa fa-chevron-right'></i></h4>
                            <NavLink className={({ isActive }) => isActive ? " selected" : ""} to='myaccount'>我的账户</NavLink><br />
                            <NavLink className={({ isActive }) => isActive ? " selected" : ""} to='mybill'>我的订单</NavLink><br />
                            <NavLink className={({ isActive }) => isActive ? " selected" : ""} to='myjf'>我的积分</NavLink><br />
                            <NavLink className={({ isActive }) => isActive ? " selected" : ""} to='jfbill'>积分订单</NavLink><br />
                            <NavLink className={({ isActive }) => isActive ? " selected" : ""} to='wallet'>我的钱包</NavLink><br />
                            <h4><span>会员资料</span><i className='fa fa-chevron-right'></i></h4>
                            <NavLink className={({ isActive }) => isActive ? " selected" : ""} to='personal'>个人资料</NavLink><br />
                            <NavLink className={({ isActive }) => isActive ? " selected" : ""} to='mysite'>地址管理</NavLink><br />
                            <NavLink className={({ isActive }) => isActive ? " selected" : ""} to='mycollect'>我的收藏</NavLink><br />
                            <NavLink className={({ isActive }) => isActive ? " selected" : ""} to='browse'>最近浏览</NavLink><br />
                            <NavLink className={({ isActive }) => isActive ? " selected" : ""} to='changepassword'>修改密码</NavLink><br />
                            <h4><span>站内信</span><i className='fa fa-chevron-right'></i></h4>
                            <NavLink className={({ isActive }) => isActive ? " selected" : ""} to='mymes'>我的消息</NavLink><br />
                            <NavLink className={({ isActive }) => isActive ? " selected" : ""} to='idea'>意见反馈</NavLink><br />
                        </div>
                    </div>
                    <div className='main'>
                        <Outlet />
                    </div>
                </div>
            </div>
        </div>
    )
}
